<!--用于树型数据-->
<template>

    <el-scrollbar :height="150" class="w-100 m-1">
      <el-tree :data="treeData" node-key="value" draggable :props="treeProps"
               default-expand-all highlight-current :expand-on-click-node="false" @nodeDragEnd="dropEnd"
      >
        <template #default="{ node, data }">
          <span>
           <el-text>{{ data[treeProps.label || "label"] }}</el-text>
          <span class="pl-2">
                 <el-button icon="Edit" link
                            type="primary" title="编辑" @click="editItem($event,node)"/>
              <el-button icon="ArrowUp" link
                         type="primary" title="添加到选项前" @click="addItem($event,node,-1)"/>
             <el-button icon="ArrowDown" link title="添加到选项前"
                        type="primary" @click="addItem($event,node,1)"/>
              <el-button icon="Plus" link title="添加子选项"
                         type="primary" @click="addItem($event,node,0)"/>
            <el-button icon="Delete" link title="删除此选项" @click="deleteItem(node)"
                       type="danger"/>
          </span>
        </span>
        </template>

      </el-tree>
      <popup-input ref="popupRef">
        <el-form style="width:200px">
          <template v-for="k in propsConfig" >
            <el-form-item :label="k.label" style="width: 100%" :title="k.title" v-if="k.name!=='children'">
              <component :is="k.tag" v-model="tempItem[k.value]" ></component>
            </el-form-item>
          </template>
        </el-form>

      </popup-input>
    </el-scrollbar>

</template>

<script setup>
import PopupInput from "@/components/PopupInput"
import {ref, watchEffect} from "vue";
import {ElNotification} from "element-plus";
import {deepClone} from "@/utils";


const props = defineProps({
  modelValue: {
    type: Array,
    required: true
  },
  propsConfig: {
    type: Array,
    required: true,
    default: () => {
      return []
    }
  }
});
const treeProps = computed(()=>{
  const res={};
  props.propsConfig.forEach(p=>{
    res[p.name] = p.value;
  })
  return res;
})
const emits = defineEmits(["update:modelValue"])
const popupRef = ref("")
const tempItem = ref({})

const treeData = ref([]);
watchEffect(() => {
  if (Array.isArray(props.modelValue)) {
    treeData.value = deepClone(props.modelValue)
  } else {
    treeData.value = [];
  }
})
const editItem = (event, node) => {
  tempItem.value = deepClone(node.data)
  popupRef.value.popup({x: event.clientX, y: event.clientY}, tempItem.value).then(res => {
    Object.assign(node.data, res);
    emits("update:modelValue", treeData.value)
  });
}

const addItem = (event, node,pos) => {
  const children = props.propsConfig.children || 'children'
  tempItem.value = {};

  popupRef.value.popup({x: event.clientX, y: event.clientY}, tempItem.value).then(res => {
    const {data, parent} = node;
    if (pos === 0) {
      if (!data[children]) {
        data[children] = []
      }
      data[children].push(res)
    } else {
      const {data: parentData} = parent;
      let target = null;
      if (Array.isArray(parentData)) {
        target = parentData;
      } else {
        target = parentData[children];
      }
      let idx = target.indexOf(data);
      if (pos === 1) {
        idx++;
      }
      target.splice(idx, 0, res)
    }
    emits("update:modelValue", treeData.value)
  });



}
const deleteItem = (node) => {

  const {data, parent} = node;

  const {data: parentData} = parent;
  let target = null;
  if (Array.isArray(parentData)) {
    target = parentData;
  } else {
    target = parentData.children;
  }
  let idx = target.indexOf(data);

  if (target === treeData.value && target.length === 1) {
    ElNotification.warning("只有一个选项，不能删除");
  } else {
    target.splice(idx, 1);
  }
  emits("update:modelValue", treeData.value)
}


function dropEnd() {
  emits("update:modelValue", treeData.value)
}

const showSetting = ref(false)
</script>

<style scoped lang="scss">
.el-button + .el-button {
  margin-left: 2px;
}
</style>
